<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
  </head>
  <body>
    <!-- <form action="/adddata" method="get" onsubmit="return false"> -->
    用户名 ： <input class="uname" type="text" name="uname" /><br />
    密码 ： <input class="pwd" type="text" name="pwd" /> <br />
    <input class="sub" type="submit" value="提交" />
    <!-- </form> -->
    <script>
      let unameEle = document.querySelector(".uname");
      let pwdEle = document.querySelector(".pwd");
      let subEle = document.querySelector(".sub");
      subEle.onclick = function () {
        let uname = unameEle.value;
        let pwd = pwdEle.value;
        console.log(uname, pwd);
        // ajax 步骤
        // 1.创建一个 ajax 对象 ；
        let xhr = new XMLHttpRequest();
        // 2.配置xhr对象
        xhr.open("get", `/adddata?uname=${uname}&pwd=${pwd}`);
        // 3.发送ajax，发送http请求
        xhr.send();
        // 4.接收ajax返还的数据；
        xhr.onload = function () {
          // 接收后端返还的内容
          console.log(xhr.responseText);
        };
      };
    </script>
  </body>
</html>
